<template>
  <div class="follow">
    <!-- 导航栏 -->
    <van-nav-bar title="关注">
      <template #left>
        <van-icon name="wap-nav" size="20" @click="show = true" />
      </template>

      <template #right>
        <van-icon name="search" size="20" @click="goSearch" />
      </template>
    </van-nav-bar>

    <!-- 我的信息 -->
    <van-popup v-model="show" position="left" :style="{ height: '100%' }">
      <Myslef></Myslef>
    </van-popup>

    <div class="login" v-if="uid === null">
      <van-empty class="custom-image" description="请先登录">
        <van-button round type="danger" class="bottom-button" @click="goLogin"
          >去登录</van-button
        >
      </van-empty>
    </div>

    <!-- 关注列表 -->
    <div class="main" v-else>
      <div class="singer">
        <div class="title">
          关注的歌手 <span>({{ Followsinger.length }})</span>
        </div>

        <!-- 空状态 -->
        <div class="mainbox" v-if="Followsinger.length === 0">
          <van-empty description="还没有关注的歌手">
            <van-button
              round
              type="danger"
              class="bottom-button"
              @click="goSearch"
            >
              去看看
            </van-button>
          </van-empty>
        </div>

        <div
          class="list"
          v-else
          v-for="(item, index) in Followsinger"
          :key="index"
        >
          <!-- 头像 -->
          <van-image
            lazy-load
            round
            width="60px"
            height="60px"
            :src="item.img"
            @click="viewSonger(item.id)"
          >
            <template v-slot:loading>
              <van-loading type="spinner" size="20" />
            </template>
          </van-image>

          <!-- 名字 -->
          <div class="textbox" @click="viewSonger(item.id)">
            <div class="name">{{ item.name }}</div>
            <div class="text">{{ item.text }}</div>
          </div>

          <div class="btn" @click="followshow = true">已关注</div>

          <!-- 显示确认取消关注窗口 -->
          <van-overlay :show="followshow">
            <div class="wrapper">
              <div class="block" @click.stop>
                <div class="canceltext">是否取消关注</div>

                <!-- 取消、确认 -->
                <div class="cancelbtn">
                  <div class="cancelbtnbox return" @click="followshow = false">
                    取消
                  </div>
                  <div class="cancelbtnbox out" @click="cancelFollowSinger">
                    确认
                  </div>
                </div>
              </div>
            </div>
          </van-overlay>
        </div>
      </div>

      <div class="user">
        <div class="title">关注的用户 <span>(0)</span></div>

        <!-- 空状态 -->
        <div class="mainbox">
          <van-empty description="还没有关注的用户">
            <van-button round type="danger" class="bottom-button">
              去看看
            </van-button>
          </van-empty>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapMutations } from "vuex";
import Myslef from "../components/Myself.vue";
export default {
  name: "Follow",

  components: {
    Myslef,
  },

  data() {
    return {
      show: false,

      followshow: false,

      uid: "",
    };
  },

  created() {
    //判断是否登录
    this.uid = this.$cookies.get("uid");

    //获取本地关注歌手数据
    let Followsingers = localStorage.getItem("Followsinger");
    if (Followsingers) {
      Followsingers = JSON.parse(Followsingers);
      this.changeStateProperty({
        key: "Followsinger",
        value: Followsingers,
      });
    }
  },

  computed: {
    ...mapState(["Followsinger"]),
  },

  methods: {
    ...mapMutations(["changeStateProperty"]),

    goLogin() {
      this.$router.push({ name: "Login" });
    },

    //跳转到搜索页面
    goSearch() {
      this.$router.push({ name: "Search" });
    },

    //查看歌手页面
    viewSonger(id) {
      this.$router.push({ name: "Songer", params: { id } });
    },

    //取消关注歌手
    cancelFollowSinger(index) {
      this.Followsinger.splice(index, 1);
      localStorage.setItem("Followsinger", JSON.stringify(this.Followsinger));
      this.followshow = false;
    },
  },
};
</script>

<style lang="less" scoped>
// 导航栏
/deep/.van-nav-bar .van-icon {
  color: #000000;
}

/deep/.van-nav-bar__title {
  font-weight: 600;
}

// 关注列表
.main {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  box-sizing: border-box;
  background-color: #fff;
}

.singer {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.user {
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  margin-bottom: 50px;
}

.title {
  width: 100%;
  height: 20px;
  line-height: 20px;
  font-size: 14px;
  font-weight: 600;
  padding: 10px 20px;
  & span {
    font-size: 12px;
    font-weight: 500;
    color: #9f9f9f;
  }
}

.list {
  width: 100%;
  display: flex;
  padding: 10px 20px;
  align-items: center;
}

.textbox {
  display: flex;
  flex-wrap: wrap;
  padding-left: 10px;
}

.name {
  width: 100%;
  font-size: 14px;
  padding-bottom: 4px;
}

.text {
  width: 100%;
  font-size: 12px;
  color: #9f9f9f;
  text-align: left;
  position: relative;
  right: 14px;
  transform: scale(0.8);
}

.btn {
  width: 50px;
  height: 20px;
  line-height: 20px;
  margin-left: auto;
  text-align: center;
  border-radius: 14px;
  border: 1px solid #fe3c30;
  color: #fe3c30;
  transform: scale(0.9);
}

//取消关注窗口
.wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}

.block {
  width: 200px;
  background-color: #fff;
  display: flex;
  flex-wrap: wrap;
  padding: 10px;
  border-radius: 10px;
}

.canceltext {
  width: 100%;
  height: 20px;
  line-height: 20px;
  font-size: 16px;
  padding: 10px 0;
  text-align: center;
}

.cancelbtn {
  width: 100%;
  display: flex;
  justify-content: space-between;
}

.cancelbtnbox {
  width: 90px;
  height: 30px;
  line-height: 30px;
  border-radius: 10px;
  text-align: center;
  font-size: 14px;
  &.out {
    color: red;
  }
}

//空状态
.bottom-button {
  width: 160px;
  height: 30px;
}

.mainbox {
  margin: auto;
}
</style>